<template>
 <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>文件操作</el-breadcrumb-item>
  <el-breadcrumb-item>批量添加题目</el-breadcrumb-item>
  
</el-breadcrumb>
<!--声明提示-->
<el-alert
    title="上传之前请先下载模板,学科id请去学科选项卡查询"
    type="info"
    show-icon>
  </el-alert>
  
<!-- 声明选项卡 进行单选与简答的切换-->
<el-card >
<el-button type="info" size="medium" @click="GetExampleLink">{{buttontag}}模板下载</el-button>


<el-tabs v-model="activeName" @tab-click="tabhandleClick" >
    <!-- 批量添加单选选项卡-->
    <el-tab-pane label="添加单选" name="first">
    
    <!--放一个上传按钮-->
    <el-upload
  class="upload-demo"
  action="http://127.0.0.1/UploadApi/GetOptionExamListByExcel"
  :on-preview="handlePreview"
  
  multiple
  :limit="1"
  :on-success="handleSuccess"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  
</el-upload>
<!--  上传区域结束 -->
<!--绘制解析用表格-->
<el-table
        :data="OptionExamList"
        border
        
        style="width: 100%"
      >
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="title" label="题目" width="180">
      </el-table-column>
      <el-table-column prop="subjectid" label="学科id" width="180">
        </el-table-column>
        
        <el-table-column prop="optiona" label="选项A" width="180">
        </el-table-column>
        <el-table-column prop="optionb" label="选项B" width="180">
        </el-table-column>
        <el-table-column prop="optionc" label="选项C" width="180">
        </el-table-column>
        <el-table-column prop="optiond" label="选项D" width="180">
        </el-table-column>
         <el-table-column prop="difficulty" label="难度" width="180">
        <!-- 插槽 评分系统-->
   
         <template slot-scope="scope">
              <el-rate
  v-model="scope.row.difficulty"
  disabled
  show-score
  text-color="#ff9900"
  >
</el-rate>
         
         </template>
        </el-table-column>

        
         <el-table-column prop="answer" label="答案" width="180">
         </el-table-column>
         <el-table-column prop="parse" label="解析" width="180">
         </el-table-column>


</el-table>
<!--放两个按钮 一个重置一个提交-->
<el-button type="primary" style=" float: right; margin-right: 25px;" @click = "OptionTableCommit"  v-if="showtags">
提交
</el-button>
<el-button type="info" style=" float: right; margin-right: 25px;" @click = "OptionTableReset">
重置
</el-button>


    
    
    </el-tab-pane>
    <!--批量添加简答选项卡-->
    <el-tab-pane label="添加简答" name="second">
    <!-- 绘制简答上传与解析区域-->
    <el-upload
  class="upload-demo"
  action="http://127.0.0.1/UploadApi/GetShortAnswerExamListByExcel"
  :on-preview="handlePreview"
  
  multiple
  :limit="1"
  :on-success="ShortAnswerhandleSuccess"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  
</el-upload>
<!--绘制简答解析table-->
<el-table
        :data="ShortAnswerExamList"
        border
        
        style="width: 100%"
      >
      <el-table-column type="index"> </el-table-column>
      <el-table-column prop="title" label="题目" width="180">
      </el-table-column>
      <el-table-column prop="subjectid" label="学科id" width="180">
        </el-table-column>
       
         <el-table-column prop="difficulty" label="难度" width="180">
        <!-- 插槽 评分系统-->
   
         <template slot-scope="scope">
              <el-rate
  v-model="scope.row.difficulty"
  disabled
  show-score
  text-color="#ff9900"
  >
</el-rate>
         
         </template>
        </el-table-column>

        
         <el-table-column prop="answer" label="答案" width="180">
         </el-table-column>
         <el-table-column prop="parse" label="解析" width="180">
         </el-table-column>


</el-table>
<!-- 简答得提交与重置区域-->
  <el-button type="primary" style=" float: right; margin-right: 25px;" @click = "ShortAnswerTableCommit"  v-if="showtags">
提交
</el-button>
<el-button type="info" style=" float: right; margin-right: 25px;" @click = "ShortAnswerTableReset">
重置
</el-button>
    
    
    
    </el-tab-pane>
    
  </el-tabs>





</el-card>
 </div>
</template>

<script>
//对外暴露接口
 export default {
name:'BatchAddExamList', 
   data () {
     return {
       activeName:"first",
       fileList:[],
       //声明按钮文字
       buttontag:"单选",
       //单选表格用数据
       OptionExamList:[
         {
         title:"测试用数据",
         subjectid:1,
         scorce:2,
         optiona:"测试用选项A",
         optionb:"测试用选项B",
         optionc:"测试用选项C",
         optiond:"测试用选项D",
         difficulty:3,
         answer:"测试用答案",
         parse:"测试用解析",



         },
          {
         title:"测试用数据",
         subjectid:0,
         scorce:2,
         optiona:"测试用选项A",
         optionb:"测试用选项B",
         optionc:"测试用选项C",
         optiond:"测试用选项D",
         difficulty:3,
         answer:"测试用答案",
         parse:"测试用解析",



         }],
         //简答用表格数据
        ShortAnswerExamList:[{
         title:"测试简答用数据",
         subjectid:1,
         scorce:2,
        
         difficulty:3,
         answer:"测试用答案",
         parse:"测试用解析",



         },
          {
         title:"测试简答用学科为空数据",
         subjectid:3,
         scorce:2,
         
         difficulty:3,
         answer:"测试用答案",
         parse:"测试用解析",



         }],
       //是否显示提交按钮
       showtags:true

     }
   },
   components: {

   },
   mounted() {
     
   },
   methods:{
     //选项卡切换函数
     tabhandleClick(tab,event){
       console.log(this.activeName)
       //根据切换来变换不同函数
       if(this.activeName == "first"){
         this.buttontag = "单选"
         
       }
       else{
         this.buttontag = "简答"
       }

     },
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
     handlePreview(file) {
        console.log(file);
      },
     //上传文件成功的触发函数
     handleSuccess(res){
       this.$message.success(res.message)
       console.log(res.data)
       this.OptionExamList = res.data

     },
     //根据按钮来获取不同的文档链接
     GetExampleLink(){
       if(this.buttontag == "单选"){
         //向后端请求模板链接
         let that = this;
         let url = "UploadApi/CreateOptionExampleExcel";
         let data = {
           

         }
         this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         window.open (data)
         that.showtags = true
         
        } else {
          that.$message.error(message);
        }
      });
       }
       else{
          //向后端请求模板链接
         let that = this;
         let url = "UploadApi/CreateShortAnswerExamlist";
         let data = {

         }
         this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         window.open (data)
         that.showtags = true
        } else {
          that.$message.error(message);
        }
      });

       }

     },
     //重置按钮触发函数
     OptionTableReset(){
       this.OptionExamList = []
     },
     //提交按钮触发函数
     OptionTableCommit(){
       //axios像后端发信
       let list = this.OptionExamList
       console.log(typeof this.OptionExamList)
       
        let that = this;
        let url = "api/BatchAddOptionExamList"
        let data = {
          Examlist:list
        }
        //let strdata = this.JSON.stringify(data)
        let jsondata = encodeURI(JSON.stringify(data),"utf-8");
        console.log(jsondata)
        this.$axios.post(url,jsondata).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         
          that.$message.success(message);
        } else {
          that.$message.error(message);
        }
        that.OptionTableReset()
      });

        
        
     },
     //简答模板上传的成功触发函数
     ShortAnswerhandleSuccess(res){
       this.$message.success(res.message)
       console.log(res.data)
       this.ShortAnswerExamList = res.data
     },
     //简答得提交
     ShortAnswerTableCommit(){
       let list = this.ShortAnswerExamList
     
       
        let that = this;
        let url = "api/BatchAddOptionExamList"
        let data = {
          Examlist:list
        }
        //let strdata = this.JSON.stringify(data)
        let jsondata = encodeURI(JSON.stringify(data),"utf-8");
        console.log(jsondata)
        this.$axios.post(url,jsondata).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         
          that.$message.success(message);
        } else {
          that.$message.error(message);
        }
        that.ShortAnswerTableReset()
      });




     },
     //简答得模板重置
     ShortAnswerTableReset(){
     this.ShortAnswerExamList = [] ;
     }


      
   }
 }
</script>

<style scoped>

 
</style>
